<#assign pageName="电子邮箱绑定">
<@override name="head-styles">
    <style>
        .layui-form-mid {
            padding:0 !important;
        }
    </style>
</@override>
<@override name="page-content">
   <form class="layui-form padding-10" lay-filter="formEmailBinding">
        <div class="layui-form-item">
           <label class="layui-form-label"><b style="color:red;padding:2px;vertical-align: middle;">*</b>电子邮箱</label>
           <div class="layui-input-inline">
                 <input type="text" id="email" name="email" placeholder="请填写电子邮箱" class="layui-input" lay-verify="required|email">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><b style="color:red;padding:2px;vertical-align: middle;">*</b>验证码</label>
            <div class="layui-input-inline">
                 <input type="text" id="vcode" name="vcode" placeholder="请填写验证码" class="layui-input" lay-verify="required">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <a href="javascript:;" id="js_vcode" class="layui-btn layui-btn-disabled">发送验证码</a>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                 <a href="javascript:;" class="layui-btn" lay-submit="" lay-filter="submit" disabled="true">立即绑定</a>
            </div>
        </div>
     </form>
</@override>
<@override name="page-scripts">
    <script>
    $(function(){
        layui.use(['form','jquery'], function(){
            var form = layui.form;
            $=layui.jquery;
            $("#email").on("input propertychange", function(){
                var email_num = $(this).val();
                var btnObj = $("#js_vcode");
                if(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email_num)){
                    btnObj.removeClass("layui-btn-disabled").addClass("layui-btn-primary");
                    btnObj.attr("onclick", "getEmailVcode(this)");
                }else{
                    btnObj.removeClass("layui-btn-primary").addClass("layui-btn-disabled");
                    btnObj.attr("onclick", "");
                }
            });
            
            form.on('submit(submit)', function(data){
                var email = $("#email").val();
                var vcode = $("#vcode").val();
                $.ajax({
                    type : 'POST',
                    async : false,
                    cache : false,
                    url : '${contextPath}/admin/binding/email',
                    data : {'email_num' : email, 'validate_code': vcode},
                    success:function(data){
                        alert(data.msg);
                        if (data.code==0) {
                            setTimeout(function () { 
                                $(this).attr("disabled", false);
                                window.location.href="${contextPath}/index";
                            }, 2000);
                        }
                    }
                });
            })
        })
    })
    var wait = 60;
    function calTime(obj) {
        if (wait == 0) {
            $(obj).removeClass("layui-btn-disabled").addClass("layui-btn-primary");
            $(obj).text("获取验证码");
            wait = 60;
        } else { 
            $(obj).text(wait+'秒后可重发');
            wait--;
            setTimeout(function(){calTime(obj)}, 1000)
        }
    }
    function getEmailVcode(btnObj) {
        $(btnObj).removeClass("layui-btn-primary").addClass("layui-btn-disabled");
        var email_num = $('#email').val();
        if(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email_num)){
            $.ajax({
                type : 'GET',
                async : false,
                contentType : 'application/json; charset=utf-8',
                cache : false,
                url : '${contextPath}/validatecode/bindingemailcode',
                dataType : 'json',
                data : {'email_num' : email_num},
                success:function(data){
                    if (data.code==0) {
                        calTime(btnObj);
                    }else{
                        alert(data.msg);
                    }
                }
            });
        }else{
           alert("请输入正确格式的电子邮箱！");
        }
    }
</script>
</@override>
<@extends name="/layout/basepage.html"/> 
